<template>
	<view>
		<nav-bar title="统计" :showLeftIcon="false"></nav-bar>
		<scroll-view scroll-y :style="{ height: mainHeight }" class="content">
			<!-- <view v-if="roles === 'store'">
        <view class="top-text">平台用户总量：6666人，客单价：1111元</view>
        <view class="top-text">客单成本1212元</view>
        <view class="top-text">全部技师53人，当日可服务技师22人</view>
      </view> -->
			<view style="margin-top: 28rpx;" v-if="roles === 103">
				<tab-index @tabClick="tabClick" :activeIndex="activeIndex">
				</tab-index>
			</view>

			<view class="time-box" v-else>
				<view class="text">时间</view>
				<view class="date">
					<uni-datetime-picker :clear-icon="false" v-model="range" type="daterange" @change="maskClick" />
				</view>
				<!-- <view class="time-list">
          <view>{{ beginTime }}-{{ endTime }} </view>
          <view class="icon"><u-icon name="arrow-down" color="#6f6f6f" size="15"></u-icon></view>
        </view> -->
			</view>


			<view v-if="roles === 103">
				<!-- <view class="box">
				<view class="title">
					<view class="text">我的客户</view>
					<view class="more" @click="handelMasterClick('member')">
						<u-icon name="arrow-right" color="#666666" size="22"></u-icon>
					</view>
				</view>
				<view class="member">
					<view class="list" v-for="(item, index) in memberData" :key="index">
						<view class="number">{{ item.number }} <span class="people">人</span></view>
						<view class="member-text">{{ item.text }} </view>
					</view>
				</view>
			</view> -->
				<view class="box">
					<view class="title">
						<view class="text">我的收益</view>
						<view class="more" @click="handelMasterClick1('earning')">
							<u-icon name="arrow-right" color="#666666" size="22"></u-icon>
						</view>
					</view>
					<view class="money">
						<view class="number">{{ sumEarnings }} <span class="people">元</span></view>
					</view>
					<view class="money-box" v-for="(item, index) in moneyConfig" :key="index">
						<view class="left">{{ item.text }}</view>
						<view class="right">{{ moneyData[item.key] }}元</view>
					</view>
				</view>
				<view class="box">
					<view class="title">
						<view class="text">我的卡项收益</view>
						<view class="more" @click="handelMasterClick2('cardEarning')">
							<u-icon name="arrow-right" color="#666666" size="22"></u-icon>
						</view>
					</view>
					<view class="member" style="display: flex;justify-content: space-around;">
						<view class="list" v-for="(item, index) in cardConfig" :key="index">
							<view class="number">{{ moneyData[item.key] }} <span class="people">元</span></view>
							<view class="member-text">{{ item.text }} </view>
						</view>
					</view>
				</view>
				<view class="box">
					<view class="title">
						<view class="text">我的评价</view>
					</view>
					<view class="comment">累计获得{{ times }}次评价；平均评分{{ Number(score).toFixed(2)  }}星</view>
				</view>
			</view>
			<view v-else>
				<!-- <view class="box">
          <view class="title">
            <view class="text">小程序日活数据</view>
            <view class="more">
              日活/月活
            </view>
          </view>
          <view class="member">
            223<span class="people">人</span>
          </view>
        </view>
        <view class="box">
          <view class="chart">
            <view class="chart-data" v-for="(item, index) in chartList" :key="index">
              <view class="top">
                今日：<span class="top-number">+200</span>
              </view>
              <view class="charts-box">
                <qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" />
              </view>
              <view class="chart-text">{{ item.text }}</view>
            </view>
          </view>
        </view>
        <view class="box">
          <view class="title">
            <view class="text">营业额趋势图</view>
          </view>
          <view class="charts-line">
            <qiun-data-charts type="line" :opts="optsLine" :chartData="chartLineData" />
          </view>
        </view>
        <view class="box">
          <view class="title">
            <view class="text">热门项目</view>
            <view class="more" @click="handelClick('project')">
              <u-icon name="arrow-right" color="#666666" size="22"></u-icon>
            </view>
          </view>
          <view class="table-list" v-for="(item, index) in tableData" :key="index">
            <view style="width: 30%;">{{ index + 1 }}</view>
            <view style="width: 50%;">{{ item.project }}</view>
            <view style="width: 20%;">{{ item.number }}次</view>
          </view>
        </view> -->
				<view class="box">
					<view class="title">
						<view class="text">技师提成收益</view>
						<view class="more" @click="handelClick('master')">
							<u-icon name="arrow-right" color="#666666" size="22"></u-icon>
						</view>
					</view>
					<view class="table-list" style="border-bottom: none;">
						<view style="width: 20%;padding: 20rpx 0;">序号</view>
						<view style="width: 20%;padding: 20rpx 0;">门店</view>
						<view style="width: 16%;margin-right: 4%;">技师姓名</view>
						<view style="width: 16%;margin-right: 4%;">累计收益</view>
						<view style="width: 20%;">技师项目收益</view>
					</view>
					<view class="table-list" v-for="(item, index) in masterData" :key="index">
						<view style="width: 10%;">{{ index + 1 }}</view>
						<view style="width: 30%;">{{ item.belongStoreName }}</view>
						<view style="width: 19%;margin-left: 1%;">{{ item.name }}</view>
						<view style="width: 18%;margin-left: 2%;">{{ item.sumEarnings }}</view>
						<view style="width: 20%;">{{ item.itemEarnings }}</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import NavBar from '@/components/nav-bar/index.vue'
	import tabIndex from '../../components/statis/tab-index.vue'
	import {
		getEarnData,
		getComment,
		getMaster
	} from "@/api/system/static"
	export default {
		components: {
			NavBar,
			tabIndex
		},
		data() {
			return {
				activeIndex: 0,
				times: '',
				score: '',
				chartData: {},
				chartLineData: {},
				range: [],
				chartList: [
					{ text: '总营业额' },
					{ text: '利润额' },
					{ text: '订单数' },
					{ text: '服务项目数' },
					{ text: '客户数' },
					{ text: '充值收益' },
					{ text: '会员卡收益' },
					{ text: '小程序支付转化率' }
				],
				tableData: [
					{ project: '项目1', number: 30 },
					{ project: '项目1', number: 30 },
					{ project: '项目1', number: 30 },
					{ project: '项目1', number: 30 }
				],
				masterData: [],
				optsLine: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: undefined,
					title: {
						name: "80%",
						fontSize: 25,
						color: "#2fc25b"
					},
					subtitle: {
						showBox: false,
						// name: "正确率",
						// fontSize: 25,
						// color: "#666666"
					},
					extra: {
						arcbar: {
							type: "circle",
							width: 12,
							backgroundColor: "#E9E9E9",
							startAngle: 1.5,
							endAngle: 0.25,
							gap: 2
						}
					}
				},
				mainHeight: '',
				memberData: [
					{ number: 28, text: '服务客户' },
					{ number: 11, text: '我的新课' },
					{ number: 11, text: '回头客' },
					{ number: 6, text: '复购客' }
				],
				moneyConfig: [
					{ text: '项目收益', key: 'itemEarnings' },
					{ text: '包间收益', key: 'compartmentEarnings' },
					{ text: '商品收益', key: 'productEarnings' },
					{ text: '退单收益', key: 'chargeBackEarnings' }
				],
				moneyData: {},
				cardConfig: [
					{ text: '会员卡', key: 'memberEarnings' },
					{ text: '储值卡', key: 'valueEarnings' }
				],
				sumEarnings: '',
				roles: '',
				today: '',
				beforeDay: '',
				thisMonth: '',
				beforeMonth: '',
				userId: ''
			}
		},
		onLoad: function() {},
		onReady() {
			this.getServerData();
			this.getLineData()
		},
		created() {
			this.mainHeight = this.$store.getters.heightData.mainHeight + 'px'

		},
		onShow() {
			this.activeIndex = 0
			this.roles = uni.getStorageSync('roles')
			this.userId = uni.getStorageSync('userId')
			// this.getEarnData()
			this.getDay()
			this.getBeforeDay()
			this.isMaster()
		},
		methods: {
			isMaster() {
				if (this.roles === 103) {
					this.getEarnData(this.today)
					this.getComment()
				} else {
					this.getMaster()

				}
			},
			getMaster() {
				getMaster().then((res) => {
					this.masterData = res.rows
				})
			},
			maskClick(e) {
				getMaster({
					timeList: this.range
				}).then((res) => {
					this.masterData = res.rows
				})
			},
			getComment() {
				getComment().then((res) => {
					this.times = res.data.times
					this.score = res.data.score
				})
			},
			getEarnData(data) {
				getEarnData({ createTime: data }).then((res) => {
					const data = res.data
					this.sumEarnings = data.sumEarnings
					this.moneyData = data
				})
			},
			getEarnMonthData(data) {
				getEarnData({ monthTime: data }).then((res) => {
					const data = res.data
					this.moneyData = data
					this.sumEarnings = data.sumEarnings
				})
			},
			getDay() {
				var date = new Date();
				// 获取当前月份
				var nowMonth = date.getMonth() + 1;

				// 获取当前是几号
				var strDate = date.getDate();

				// 添加分隔符“-”
				var seperator = "-";

				// 对月份进行处理，1-9月在前面添加一个“0”
				if (nowMonth >= 1 && nowMonth <= 9) {
					nowMonth = "0" + nowMonth;
				}

				// 对月份进行处理，1-9号在前面添加一个“0”
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}

				// 最后拼接字符串，得到一个格式为(yyyy-MM-dd)的日期
				this.today = date.getFullYear() + seperator + nowMonth + seperator + strDate;
				this.thisMonth = date.getFullYear() + seperator + nowMonth
			},
			getBeforeDay() {
				var date = new Date();

				// 获取昨天的日期
				var yesterdayDate = new Date(date);
				yesterdayDate.setDate(date.getDate() - 1);

				var yesterdayMonth = yesterdayDate.getMonth() + 1;
				if (yesterdayMonth < 10) {
					yesterdayMonth = "0" + yesterdayMonth;
				}

				var yesterdayDay = yesterdayDate.getDate();
				if (yesterdayDay < 10) {
					yesterdayDay = "0" + yesterdayDay;
				}

				this.yesterday = yesterdayDate.getFullYear() + "-" + yesterdayMonth + "-" + yesterdayDay;

				// 获取上个月的月份
				var lastMonth = date.getMonth();
				if (lastMonth === 0) { // 如果当前月份是1月，上个月就是去年的12月
					lastMonth = 12;
				} else {
					lastMonth = lastMonth < 10 ? "0" + lastMonth : lastMonth;
				}
				this.lastMonth = date.getFullYear() + "-" + lastMonth;
				this.beforeMonth = this.lastMonth
				this.beforeDay = this.yesterday
			},
			tabClick(item, index) {
				this.activeIndex = index
				if (this.roles === 103) {
					if (this.activeIndex === 0) {
						this.getEarnData(this.today)
					}
					if (this.activeIndex === 1) {
						this.getEarnData(this.beforeDay)
					}
					if (this.activeIndex === 2) {
						this.getEarnMonthData(this.thisMonth)
					}
					if (this.activeIndex === 3) {

						this.getEarnMonthData(this.beforeMonth)
					}
				}
			},
			handelClick(item) {
				uni.navigateTo({
					url: `/subPages/admin/statistics/${item}`,
				})
			},
			handelMasterClick1(item) {
				if (this.activeIndex === 0) {
					// this.getEarnData(this.today)
					uni.navigateTo({
						url: `/subPages/order/earning?createTime=${this.today}`,
					})
				}
				if (this.activeIndex === 1) {
					// this.getEarnData(this.beforeDay)
					uni.navigateTo({
						url: `/subPages/order/earning?createTime=${this.beforeDay}`,
					})
				}
				if (this.activeIndex === 2) {
					// this.getEarnMonthData(this.thisMonth)
					uni.navigateTo({
						url: `/subPages/order/earning?monthTime=${this.thisMonth}`,
					})
				}
				if (this.activeIndex === 3) {
					// this.getEarnMonthData(this.beforeMonth)

					uni.navigateTo({
						url: `/subPages/order/earning?monthTime=${this.beforeMonth}`,
					})
				}
			},
			handelMasterClick2(item) {
				if (this.activeIndex === 0) {
					// this.getEarnData(this.today)
					uni.navigateTo({
						url: `/subPages/order/cardEarning?createTime=${this.today}`,
					})
				}
				if (this.activeIndex === 1) {
					// this.getEarnData(this.beforeDay)
					uni.navigateTo({
						url: `/subPages/order/cardEarning?createTime=${this.beforeDay}`,
					})
				}
				if (this.activeIndex === 2) {
					// this.getEarnMonthData(this.thisMonth)
					uni.navigateTo({
						url: `/subPages/order/cardEarning?monthTime=${this.thisMonth}`,
					})
				}
				if (this.activeIndex === 3) {
					// this.getEarnMonthData(this.beforeMonth)
					uni.navigateTo({
						url: `/subPages/order/cardEarning?monthTime=${this.beforeMonth}`,
					})
				}
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							name: "正确率",
							color: "#2fc25b",
							data: 0.8
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			getLineData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
						series: [{
								name: "成交量A",
								data: [35, 8, 25, 37, 4, 20]
							},
							// {
							//   name: "成交量B",
							//   data: [70,40,65,100,44,68]
							// },
							// {
							//   name: "成交量C",
							//   data: [100,80,95,150,112,132]
							// }
						]
					};
					this.chartLineData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		},

	}
</script>

<style lang="scss" scoped>
	.time-box {
		margin-top: 20rpx;
		padding: 0 30rpx;
		display: flex;

		.text {
			font-size: 36rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			color: #000000;
			margin-right: 20rpx;
			line-height: 68rpx;
		}

		.time-list {
			display: flex;
			height: 68rpx;
			background-color: #fff;
			line-height: 68rpx;
			border-radius: 12rpx;
			font-size: 36rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			color: #000000;
			padding: 0 30rpx;

			.icon {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 10rpx;
			}
		}
	}

	.charts-box {
		width: 100%;
		height: 220rpx;
	}

	.charts-line {
		width: 100%;
		height: 500rpx;
	}

	.top-text {
		font-size: 36rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 500;
		color: #333333;
		line-height: 46rpx;
	}

	.content {
		padding: 28rpx;
	}


	.number {
		font-size: 46rpx;
		font-family: DIN, DIN;
		font-weight: bold;
		color: #000000;
	}

	.people {
		font-size: 29rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 500;
		color: #000000;
		margin-top: 14rpx;
	}

	.tab-list {
		display: flex;

		.tab {
			width: 110rpx;
			height: 60rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			color: #C27E15;
			line-height: 60rpx;
			border-radius: 14rpx;
			border: 2rpx solid #C27E15;
			margin-right: 16rpx;
			text-align: center;
		}

		.active-tab {
			background-color: #C27E15;
			color: #fff;
		}
	}

	.box {
		width: 100%;
		background: #FFFFFF;
		border-radius: 17rpx 17rpx 17rpx 17rpx;
		opacity: 1;
		padding: 24rpx 30rpx 24rpx 22rpx;
		margin-top: 28rpx;

		.chart {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.chart-data {

				width: 48%;
				// height: 321rpx;
				background: #F5F6FA;
				border-radius: 21rpx 21rpx 21rpx 21rpx;
				opacity: 1;
				padding: 16rpx 16rpx 26rpx 16rpx;
				margin-bottom: 20rpx;

				.top {
					font-size: 28rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					color: #000000;
					margin-bottom: 10rpx;

					.top-number {
						color: #01B960;

					}
				}

				.chart-text {
					text-align: center;
					font-size: 32rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					color: #000000;
				}
			}
		}

		.title {
			display: flex;
			justify-content: space-between;
			margin-bottom: 10rpx;

			.text {
				font-size: 40rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				color: #333333;
			}

			.more {
				display: flex;
				justify-content: center;
				align-items: center;
				color: #666666;
			}
		}

		.table-list {
			display: flex;
			font-size: 34rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			// text-align: center;
			border-bottom: 1rpx solid #f2f2f2;
			padding: 25rpx 30rpx;

			&:last-child {
				border-bottom: none;
			}

		}

		.member {
			display: flex;
			justify-content: center;
			margin-top: 20rpx;
			font-size: 46rpx;
			font-family: DIN, DIN;
			font-weight: bold;
			color: #000000;

			.list {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.member-text {
					font-size: 30rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					color: #666666;
				}
			}
		}

		// .member {
		// 	display: flex;
		// 	justify-content: space-between;
		// 	margin-top: 20rpx;

		// 	.list {
		// 		display: flex;
		// 		flex-direction: column;
		// 		justify-content: center;
		// 		align-items: center;

		// 		.member-text {
		// 			font-size: 30rpx;
		// 			font-family: Source Han Sans CN, Source Han Sans CN;
		// 			font-weight: 400;
		// 			color: #666666;
		// 		}
		// 	}
		// }

		.money {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 20rpx;
		}

		.money-box {
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			font-weight: 400;
			color: rgba(128, 128, 128, 1);
			margin-top: 28rpx;
		}

		.comment {
			font-size: 34rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			margin-top: 20rpx;
		}
	}
</style>